<template>
  <div class="indexage">
    <!-- 调用公共头部组件 -->
    <AdminHeaderCom/>

  <!-- 主题 -->
  <main>
    <!-- 左侧：公共侧导航栏组件 -->
    <AdminAsideCom/>

    <!-- 右侧：根据路由地址加载其他功能的组件 -->
    <div class="content-container">
      <router-view/>
    </div>
  </main>
  </div>
</template>

<script setup>
import AdminAsideCom from "@/components/admin/AdminAsideCom.vue";
import AdminHeaderCom from "@/components/admin/AdminHeaderCom.vue";


</script>

<style>
.indexage{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.indexage main{
  /* width: 100%;
  height: 80vh;
  display: flex; */
  flex: 1;
  display: flex;
  overflow: hidden;
}
/* 左侧边栏样式 */
AdminAsideCom {
  min-width: 200px; /* 设置侧边栏最小宽度 */
  height: 100%;
  overflow-y: auto; /* 侧边栏内容过多时显示滚动条 */
}

/* 右侧内容容器 */
.content-container {
  flex-grow: 1; /* 占据剩余宽度 */
  height: 100%;
  overflow-y: auto; /* 内容过多时显示滚动条 */
  padding: 16px; /* 添加内边距 */
  background-color: #f5f5f5; /* 设置背景色以便区分 */
}
</style>